<template lang="pug">
view.mine
  view(v-if="!isLogin")
    view.header_nologin(:style="{paddingTop:statusBarHeight + 'px'}")
      view.nologin(:style="{marginTop:height + 'px'}")
        image(:src="`${prefix_image}/mine/nologin_ava.png`")
        text.nologin_name 喜欢您来
      text.nologin_desc 请先登录，解锁更多功能
    view.goLogin
      button.login_btn(open-type="getUserProfile" @tap="loginEvents" :disabled="loginBtnDisable")
        | 立即登录
  view(v-else)
    view.header_login(:style="{paddingTop:statusBarHeight + 'px'}")
      view.login(:style="{marginTop:height + 'px'}")
        image(:src="userInfo.avatarUrl")
        text.nologin_name {{userInfo.nickName}}
    view.loginBar
      view.userFile
        view.file
          text.title 宠物档案
          text.info 2只爱宠
        view.file
          text.title 就医记录
          text.info 1 份问诊记录
      view.list
        view.item
          image(:src="`${prefix_image}/mine/mineIcon1.png`")
          text 已识别视频
        view.item
          image(:src="`${prefix_image}/mine/mineIcon2.png`")
          text 打卡视频
        view.item
          image(:src="`${prefix_image}/mine/mineIcon3.png`")
          text 我的预约
        view.item
          image(:src="`${prefix_image}/mine/mineIcon4.png`")
          text 我的卡券
  view.content
    view.item(v-for="item in list" :key="item.name")
      text.name {{item.name}}
      text.gui-grids-icon.gui-icons 
</template>

<script >
import store from '@/store';
import { reactive,defineComponent, toRefs, getCurrentInstance } from 'vue';
import user from '@/hooks/useUser.js'
import config from '@/hooks/useConfig.js'
export default defineComponent({
	setup(){
		const { height, statusBarHeight } = store.state.phoneInfo
		const {isLogin,userInfo} = user()
		const {prefix_image} = config()
		const { 
			appContext: 
			{
				config: { 
					globalProperties: global
					
				},
			},
		} = getCurrentInstance();
		const data = reactive({
			statusBarHeight,
			height,
			list:[
				{name:'我的订单',path:'',type:1},
				{name:'关注公众号',path:'',type:1},
				{name:'客服',path:'',type:1},
				{name:'意见反馈',path:'',type:1},
				{name:'设置',path:'',type:1},
			],
			loginBtnDisable:false
		})
		const loginEvents = function(){
			data.loginBtnDisable = !data.loginBtnDisable
			uni.getUserProfile({
				desc: '用于完善用户资料',
				success: ({userInfo, encryptedData, iv}) => {
					data.loginBtnDisable = !data.loginBtnDisable
					uni.login({
						provider: 'weixin',
						success: function ({code}) {
							console.log(code, userInfo, encryptedData)
							global.$request.post('api/wxMiniLogin', {
								code: code,
								nickname: userInfo.nickName,
								avatar: userInfo.avatarUrl,
								encrypted_data: encryptedData,
								iv: iv
							}).then(() => {
								
							})
							
							store.dispatch('login',{code,userInfo})
						}
					});
				},
				fail:(err)=>{
					console.log(err)
					data.loginBtnDisable = !data.loginBtnDisable
				}
			})
		}
		return  {
			...toRefs(data),
			loginEvents,
			prefix_image,isLogin,userInfo
		}
	}
})
</script>
<style lang="stylus">
.mine{
	.goLogin{
		padding 0 32rpx
		margin-bottom: 120rpx
		display: flex
		.login_btn{
				width: 290rpx;
				height: 96rpx;
				background: #FFD300;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #111111;
				line-height: 96rpx;
				text-align: center
				margin 12rpx 0 0 0
			}
	}
	.header_nologin{
		height: 430rpx
		width 100vw
		background: url('/static/mine/bg.png') 
		background-size: 100% 100%
		box-sizing: border-box
		padding 0 32rpx
		.nologin{
			display: flex
			align-items: center
			margin-bottom 32rpx
			padding-top 34rpx
			image{
				width 120rpx
				height: 120rpx
				margin-right 32rpx
				border-radius: 50%
			}
			text{
				font-size: 40rpx;
				font-weight: 600;
				color: #333333;
				line-height: 56rpx;
			}

		}
		.nologin_desc{
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			line-height: 1;
		}

	}
}
</style>
<style lang="stylus" scoped>
.mine{
	.content{
		width: 100vw;
		box-sizing: border-box
		padding 0 32rpx

		.item{
			display: flex
			align-items: center
			justify-content: space-between
			margin-bottom 64rpx
			text{
				font-size 32rpx
				width: 32rpx
				height: 32rpx
				line-height: 1
			}
			.name{
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				line-height: 1
				display: inline-block
				width: 300rpx
			}
		}
	}
}
</style>

<style lang="stylus" scoped>
 .mine {
	 .header_login{
		height: 352rpx
		width 100vw
		box-sizing: border-box
		padding 0 32rpx
		.login{
			display: flex
			align-items: center
			margin-bottom 32rpx
			padding-top 34rpx
			image{
				width 120rpx
				height: 120rpx
				margin-right 32rpx
				border-radius: 50%
			}
			text{
				font-size: 40rpx;
				font-weight: 600;
				color: #333333;
				line-height: 56rpx;
			}
		}
	}
	.loginBar{
		margin-bottom 84rpx
		.userFile{
			display: flex
			width: 686rpx;
			height: 166rpx;
			background: #FFD300;
			border-radius: 16rpx;
			margin 0 auto 48rpx
			.file{
				flex 1
				display: flex;
				flex-direction: column
				align-items: center
				justify-content: center
				text:first-child{
					font-size 40rpx 
					font-weight: 700
					margin-bottom 14rpx
				}
				text:last-child{
					font-size: 24rpx;
					font-weight: 400;
					color: #47250A;
				}
			}
		}
		.list{
			display: flex
			.item{
				flex 1
				display: flex
				align-items: center
				flex-direction: column
				image{
					width 90rpx
					height: 90rpx
				}
				text{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
			}
		}

	}
 }
</style>